<script setup lang="ts">
import type { TabPaneName } from "element-plus";
const PageTabsStore = usePageTabsStore();
export interface menu {
  label: string;
  path: string;
  menuHide?: boolean;
  nickName?: string;
  icon?: string;
  index?: string;
  children?: menu[];
}
export interface MenuProps {
  menu_list: menu[];
  default_openeds?: string[];
  collapse?: boolean;
  homePath: string;
}
/** 父组件传参
 * @param menu_list 菜单列表
 */
const { menu_list, homePath } = defineProps<MenuProps>();
const route = useRoute();
/**
 * 通过路径获取菜单项
 *
 * @param menu_list 菜单列表
 * @param path 菜单路径
 * @returns 返回匹配的菜单项，如果没有找到则返回null
 */
function getMenuByPath(menu_list: menu[], path: string) {
  let finalResult = null;
  for (const item of menu_list) {
    if (item.path === path) {
      finalResult = item;
      break;
    } else if (item.children && item.children.length > 0) {
      let result: any = getMenuByPath(item.children, path);
      if (result) {
        finalResult = result;
        break;
      }
    }
  }
  return finalResult;
}
watch(
  () => route.path,
  () => {
    let newMenu = getMenuByPath(menu_list, route.path);
    if (newMenu && newMenu.path) {
      PageTabsStore.current_pageTab = newMenu.path;
      PageTabsStore.addTab(newMenu);
    } else {
      PageTabsStore.current_pageTab = homePath;
    }
  },
  { immediate: true }
);
// 获取全局路由
const router = useRouter();
/**
 * 根据新的标签页名称更改当前路由
 */
function tabChange(newTab: TabPaneName) {
  router.push(String(newTab));
}
/**
 * 移除指定的标签页
 */
function tabRemove(targetTab: TabPaneName) {
  if (targetTab === PageTabsStore.current_pageTab) {
    let targetIndex = 0;
    for (const [index, tab] of PageTabsStore.pageTabs.entries()) {
      if (tab.path === targetTab) {
        targetIndex = index;
        break;
      }
    }
    if (targetIndex === 0) {
      PageTabsStore.current_pageTab = homePath;
    } else {
      PageTabsStore.current_pageTab =
        PageTabsStore.pageTabs[targetIndex - 1].path;
    }
    router.push(PageTabsStore.current_pageTab);
  }
  PageTabsStore.delTab(String(targetTab));
}
const menuInfo = reactive({
  x: 0,
  y: 0,
  menuItems: [
    {
      label: "关闭其他页签",
      onClick: (targetPath: string) => {
        PageTabsStore.closeOtherTabs(targetPath);
        router.push(targetPath);
      },
    },
    {
      label: "关闭全部页签",
      onClick: (targetPath: string) => {
        PageTabsStore.closeAllTabs();
        router.push(homePath);
      },
    },
  ],
  visible: false,
  targetPath: "",
});
/**
 * 右键点击事件处理函数
 *
 * @param event 鼠标事件对象
 * @param targetPath 目标路径
 */
const onContextmenu = (event: MouseEvent, targetPath: string) => {
  event.preventDefault();
  menuInfo.x = event.clientX;
  menuInfo.y = event.clientY;
  menuInfo.visible = true;
  menuInfo.targetPath = targetPath;
};
</script>
<template>
  <el-tabs
    @tab-change="tabChange"
    @tab-remove="tabRemove"
    v-model="PageTabsStore.current_pageTab"
    type="border-card"
  >
    <el-tab-pane :name="homePath">
      <template #label>
        <S-icon icon="ic:baseline-home" />
      </template>
      <slot></slot>
    </el-tab-pane>
    <el-tab-pane
      class="overflow-hidden max-h-[600px]"
      closable
      v-for="item in PageTabsStore.pageTabs"
      :key="item.path"
      :name="item.path"
    >
      <template #label>
        <!-- 仅页签名称上响应右键菜单 -->
        <span @contextmenu.prevent="onContextmenu($event, item.path)">{{
          item.label
        }}</span>
      </template>
      <!-- <el-scrollbar> -->
      <slot></slot>
      <!-- </el-scrollbar> -->
    </el-tab-pane>
  </el-tabs>
  <!-- 右键菜单 -->
  <S-contextmenu :menuInfo="menuInfo" @closeMenu="menuInfo.visible = false" />
</template>
<style scoped>
/* 设置 el-tabs 撑满外层容器 */
.el-tabs {
  flex: 1;
}
</style>
